<!-- 结构 -->
<script setup lang="ts">
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';


/**
 * 1.创建阶段：创建响应式数据
 * 2.挂载阶段：渲染模板
 * 3.更新阶段：修改数据，更新视图
 * 4.销毁阶段：销毁Vue实例
 */

onBeforeMount(() => {
    console.log('挂载前 - onBeforeMount');
})

onMounted(() => {
    console.log('挂载后 - onMounted');
})

onBeforeUpdate(() => {
    console.log('数据已经变化，试图没有更新 - onBeforeUpdate');
})

onUpdated(() => {
    console.log('数据已经变化，试图也已经更新 - onUpdated');
})

onBeforeUnmount(() => {
    console.log('组件销毁之前 - onBeforeUnmount');
    clearInterval(timeID)
})

onUnmounted(() => {
    console.log('组件销毁之后 - onUnmounted');
})

// ------------------------------

const num = ref(100)

const timeID = setInterval(() => {
    num.value++
}, 1000)

</script>

<!-- JS逻辑 -->
<template>
    <div class="child-page">

        <div>我是子组件--{{ num }}</div>

    </div>
</template>

<!-- 样式 -->
<style lang="css" scoped></style>